<template>
  <div class="parent" :style="{ paddingBottom: paddingBottom + 'px' }">
    <SonSonDemo12 ref="childComp"></SonSonDemo12>
  </div>
</template>

<script setup>
import { ref, onUpdated, nextTick } from 'vue'
import SonSonDemo12 from './SonSonDemo12.vue'

// 引用子组件实例
const childComp = ref()
const paddingBottom = ref(20) // 父组件的底部内边距

// 当组件更新时调用
onUpdated(() => {
  // 当子组件的内容更新时，调整父组件的布局
  if (childComp.value) {
    // 使用 nextTick 确保 DOM 更新完成后再计算高度
    nextTick(() => {
      // 获取子组件的 DOM 元素
      const childElement = childComp.value.$el

      if (childElement) {
        // 获取子组件的高度
        const childHeight = childElement.offsetHeight
        console.log('Child component updated, adjusting layout...')

        // 假设逻辑是根据子组件高度调整父组件的 paddingBottom
        paddingBottom.value = childHeight / 2
      }
    })
  }
})
</script>

<style lang="scss" scoped>
.parent {
  padding: 20px;
  border: 1px solid #ccc;
  transition: padding-bottom 0.3s ease;
}
</style>
